<template>
  <div class="tags_from">
    <!-- 登录表单 -->
    <div class="tag_login" v-if="loginType == 0">
      <a-form :model="loginForm" @submit-success="submit">
        <a-form-item
          field="username"
          :hide-label="true"
          :rules="form_rules.verfiName"
        >
          <a-input
            size="large"
            v-model="loginForm.username"
            placeholder="输入用户名"
          />
        </a-form-item>
        <a-form-item field="password" :hide-label="true" :rules="form_rules.password">
          <a-input-password
            size="large"
            v-model="loginForm.password"
            placeholder="输入密码（6~18个字符）"
          />
        </a-form-item>
        <a-button
          type="primary"
          html-type="sumbit"
          style="height: 44px; font-size: 16px"
          size="large"
          >{{ tagList[loginType].name }}</a-button
        >
      </a-form>
    </div>
    <!-- 注册表单 -->
    <div class="tag_login" v-if="loginType == 1">
      <a-form :model="registerForm" ref="register" @submit-success="submit">
        <a-form-item
          field="username"
          :hide-label="true"
          :rules="form_rules.username"
        >
          <a-input
            size="large"
            v-model="registerForm.username"
            placeholder="输入用户名"
          />
        </a-form-item>
        <a-form-item field="password" :hide-label="true" :rules="form_rules.password">
          <a-input-password
            size="large"
            v-model="registerForm.password"
            placeholder="输入密码（6~18个字符）"
          />
        </a-form-item>
        <a-form-item field="checkPass" :hide-label="true" :rules="form_rules.checkPass">
          <a-input-password
            size="large"
            v-model="registerForm.checkPass"
            placeholder="确认密码（6~18个字符）"
          />
        </a-form-item>
        
        <a-button
          type="primary"
          html-type="sumbit"
          style="height: 44px; font-size: 16px"
          size="large"
          >{{ tagList[loginType].name }}</a-button
        >
      </a-form>
      </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import {Message} from '@arco-design/web-vue'
import {loginRequest,registerRequest,forgetPassRequest,sendEmailCodeRequest} from '@/apis/web.js'
import { useRouter } from "vue-router";
const app_url=location.origin;
//父向子传参
const props = defineProps({
  loginType: Number,
  tagList: Array,
});
//路由
const router=useRouter()
//响应
const register=ref(null)
const forget=ref(null)
//登录表单
const loginForm = reactive({
  username: "",
  password: "",
});
//注册表单
const registerForm=reactive({
  username:'',
  password:'',
  checkPass:''
})

//登录 or 注册
const submit=()=>{
  let loginType=props.loginType;
  if(loginType==0){
    loginRequest(loginForm).then(res=>{
      localStorage.setItem("token", res.data)
      Message.success("登录成功~")
      router.push({
          name:"Love"
      })
    }).catch(e=>{
      Message.error("用户信息不正确~")
    })
  }else if(loginType==1){
    registerRequest(registerForm).then(res=>{
        Message.success("快来登录吧！")
        router.push({
          name:"Login"
        })
    }).catch(e=>{
      Message.error("用户已注册~")
    })
  }
}
//表单验证
const form_rules = {
  username: [
    { required: true, message: "用户名不能为空~" },
    { maxLength: 16, message: "用户名不能超过16个字符~"},
    { minLength: 3, message: "用户名至少3个字符~" },
  ],
  password: [
    { required: true, message: "密码不能为空~" },
    { maxLength: 18, message: "密码不能超过18个字符~"},
    { minLength: 6, message: "密码至少6个字符~" },
  ],
  checkPass:[
    { required: true, message: "确认密码不能为空~" },
    { maxLength: 18, message: "确认密码不能超过18个字符~"},
    { minLength: 6, message: "确认密码至少6个字符~" },
    { validator:(val,callback)=>{
      if(val!=registerForm.password){
        callback("两次密码不一致~")
      }
    }}
    // { maxLength: 16, message: "用户名/邮箱不能超过16个字符~"},
    // { minLength: 5, message: "用户名/邮箱至少5个字符~" },
    // { match: /^\w+([-+.]\w+)*(@\w+([-.]\w+)*\.\w+([-.]\w+)*)?$/, message: "邮箱格式不正确~" },
  ]
};
</script>
<style lang="less" scoped>
:deep(.arco-input-prepend),:deep(.arco-input-append)  {
    padding: 0;
}
 
</style>